// Global
var win = window,
    doc = document;

// Global Functions

function hasClass(el, cls) {
    return el.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
};

function addClass(el, cls) {
    if (!hasClass(el, cls)) {
        el.className += " " + cls;
    }
};

function removeClass(el, cls) {
    if (hasClass(el, cls)) {

        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        el.className = el.className.replace(reg, ' ');
    }
};

// Elements

var site = doc.getElementsByClassName('site-wrap')[0];
var wrap = doc.getElementsByClassName('panel-wrap')[0];

var panel = doc.getElementsByClassName('panel');

var zoom = doc.getElementsByClassName('js-zoom');

var nav_up = doc.getElementsByClassName('js-up'),
    nav_left = doc.getElementsByClassName('js-left'),
    nav_right = doc.getElementsByClassName('js-right'),
    nav_down = doc.getElementsByClassName('js-down');

var animation = doc.getElementsByClassName('js-animation');

// Tracking
var pos_x = 0,
    pos_y = 0;

function setPos() {
    wrap.style.transform = 'translateX(' + pos_x + '00%) translateY(' + pos_y + '00%)';
    setTimeout(function () {
        removeClass(wrap, 'animate');
    }, 600);
}

setPos();

function moveUp() {
    addClass(wrap, 'animate');
    pos_y++;
    setPos();

    //移动 nav位置
    document.querySelector(".nav").style.top = 0;
}

function moveLeft() {
    addClass(wrap, 'animate');
    pos_x++;
    setPos();
}

function moveRight() {
    addClass(wrap, 'animate');
    pos_x--;
    setPos();
}

function moveDown() {
    addClass(wrap, 'animate');
    pos_y--;
    setPos();

    //移动 nav位置
    // console.log(document.querySelector(".nav").offsetHeight);
    document.querySelector(".nav").style.top = window.innerHeight - document.querySelector(".nav").offsetHeight + "px";
}

for (var x = 0; x < nav_up.length; x++) {
    nav_up[x].addEventListener('click', moveUp);
}

for (var x = 0; x < nav_left.length; x++) {
    nav_left[x].addEventListener('click', moveLeft);
}

for (var x = 0; x < nav_right.length; x++) {
    nav_right[x].addEventListener('click', moveRight);
}

for (var x = 0; x < nav_down.length; x++) {
    nav_down[x].addEventListener('click', moveDown);
}

// Animations

for (var x = 0; x < animation.length; x++) {
    (function (_x) {
        animation[_x].addEventListener('click', function () {
            toggleAnimation(_x);
        });
    })(x);
}

function toggleAnimation(i) {
    for (var x = 0; x < animation.length; x++) {
        if (i === x) {
            addClass(animation[x], 'active');
            addClass(wrap, animation[x].getAttribute('data-animation'));
        } else {
            removeClass(animation[x], 'active');
            removeClass(wrap, animation[x].getAttribute('data-animation'));
        }
    }

}

for (var x = 0; x < zoom.length; x++) {
    zoom[x].addEventListener('click', zoomOut);
}

function zoomOut(e) {
    e.stopPropagation();
    addClass(site, 'show-all');
    for (var x = 0; x < panel.length; x++) {
        (function (_x) {
            panel[_x].addEventListener('click', setPanelAndZoom);
        })(x);
    }
}

function setPanelAndZoom(e) {
    pos_x = -e.target.getAttribute('data-x-pos'),
        pos_y = e.target.getAttribute('data-y-pos');
    setPos();
    zoomIn();

    zoomInflag = !zoomInflag;

    zoomButton.innerHTML = `
    <svg t="1712067175745" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="5041" width="200" height="200">
                    <path class="" stroke="#000" style="fill: white;"
                        d="M789.333333 64a170.666667 170.666667 0 0 1 170.666667 170.666667v311.466666a8.533333 8.533333 0 0 1-8.533333 8.533334h-46.933334a8.533333 8.533333 0 0 1-8.533333-8.533334V234.666667a106.666667 106.666667 0 0 0-102.037333-106.56L789.333333 128H234.666667a106.666667 106.666667 0 0 0-106.56 102.037333L128 234.666667v554.666666a106.666667 106.666667 0 0 0 102.037333 106.56L234.666667 896h311.466666c4.693333 0 8.533333 3.84 8.533334 8.533333v46.933334a8.533333 8.533333 0 0 1-8.533334 8.533333H234.666667a170.666667 170.666667 0 0 1-170.666667-170.666667V234.666667a170.666667 170.666667 0 0 1 170.666667-170.666667h554.666666z m85.333334 554.666667a85.333333 85.333333 0 0 1 85.333333 85.333333v170.666667a85.333333 85.333333 0 0 1-85.333333 85.333333h-170.666667a85.333333 85.333333 0 0 1-85.333333-85.333333v-170.666667a85.333333 85.333333 0 0 1 85.333333-85.333333h170.666667z m0 64h-170.666667a21.333333 21.333333 0 0 0-21.184 18.837333L682.666667 704v170.666667a21.333333 21.333333 0 0 0 18.837333 21.184L704 896h170.666667a21.333333 21.333333 0 0 0 21.184-18.837333L896 874.666667v-170.666667a21.333333 21.333333 0 0 0-18.837333-21.184L874.666667 682.666667zM460.8 192c4.693333 0 8.533333 3.84 8.533333 8.533333v46.933334a8.533333 8.533333 0 0 1-8.533333 8.533333h-159.530667l229.162667 229.184-45.248 45.248L256 301.269333V460.8a8.533333 8.533333 0 0 1-8.533333 8.533333H200.533333a8.533333 8.533333 0 0 1-8.533333-8.533333V256a64 64 0 0 1 60.245333-63.893333L256 192h204.8z"
                        fill="#333333" p-id="5042"></path>
                </svg>
    `

    // console.log(pos_x, pos_y);
    if (pos_y === '-1') {
        //移动 nav位置
        document.querySelector(".nav").style.top = window.innerHeight - window.innerHeight * 0.08 + "px";
    }
    if (pos_y === '0') {
        //移动 nav位置
        document.querySelector(".nav").style.top = 0;
    }
}


function zoomIn() {
    for (var x = 0; x < panel.length; x++) {
        panel[x].removeEventListener('click', setPanelAndZoom);
    }
    removeClass(site, 'show-all');
}



// document.body.addEventListener('click', e => {
//     console.log(e.target);
// })
// document.querySelector('.zoomButton').addEventListener('click', e => {
//     console.log(e.target);
// })

